<template>
  <div class="post-list">
    <div v-for="(post, index) in posts" :key="index" class="post-item" @click="goToDetail(post)">
      <!-- 内容区域 -->
      <div class="content">
        <!-- 标题 -->
        <h3 class="title">{{ post.title }}</h3>
        <!-- 内容 -->
        <div class="meta">
          <span class="roast-content">{{ post.content }}</span>
        </div>
        
        <!-- 作者和时间 -->
        <div class="meta">
          <span class="author">{{ post.author_name || '匿名用户' }}</span>
          <span class="time">{{ formatTime(post.created_at) }}</span>
        </div>
        
        <!-- 标签 -->
        <div class="tags">
          <span v-if="post.category" class="tag">{{ post.category }}</span>
        </div>
      </div>
    </div>

    <!-- 分页组件 -->
    <div class="pagination" v-if="totalPages > 1">
      <button 
        :disabled="currentPage === 1" 
        @click="changePage(currentPage - 1)"
        class="page-btn"
      >
        上一页
      </button>
      
      <span 
        v-for="page in pageNumbers" 
        :key="page"
        :class="{ 'page-number': true, 'active': page === currentPage }"
        @click="changePage(page)"
      >
        {{ page }}
      </span>
      
      <button 
        :disabled="currentPage === totalPages" 
        @click="changePage(currentPage + 1)"
        class="page-btn"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<script>
import { RoastApi } from '@/utils/api'

export default {
  name: 'Roastlist',
  props: {
    companyId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      posts: [],
      defaultAvatar: 'https://via.placeholder.com/40',
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    },
    pageNumbers() {
      const pages = []
      const maxVisiblePages = 5
      let startPage = Math.max(1, this.currentPage - Math.floor(maxVisiblePages / 2))
      let endPage = startPage + maxVisiblePages - 1
      
      if (endPage > this.totalPages) {
        endPage = this.totalPages
        startPage = Math.max(1, endPage - maxVisiblePages + 1)
      }
      
      for (let i = startPage; i <= endPage; i++) {
        pages.push(i)
      }
      
      return pages
    }
  },
  mounted() {
    this.fetchPosts()
  },
  methods: {
    async fetchPosts() {
      try {
        const params = {
          skip: (this.currentPage - 1) * this.pageSize,
          limit: this.pageSize
        }
        
        // 如果传入了 companyId，则添加到请求参数中
        if (this.companyId) {
          params.company_id = this.companyId
        }
        
        const response = await RoastApi.getRoastList(params)
        // 根据实际返回结构调整
        if (Array.isArray(response)) {
          this.posts = response
          // 由于API没有返回总数，我们简单处理分页逻辑
          this.total = response.length === this.pageSize ? 
            this.currentPage * this.pageSize + 1 : 
            (this.currentPage - 1) * this.pageSize + response.length
        } else if (response.data) {
          this.posts = response.data.items || response.data
          this.total = response.data.total || this.posts.length
        } else {
          this.posts = response.items || response
          this.total = response.total || this.posts.length
        }
      } catch (error) {
        console.error('获取吐槽列表失败:', error)
      }
    },
    
    changePage(page) {
      if (page >= 1 && page !== this.currentPage) {
        this.currentPage = page
        this.fetchPosts()
      }
    },
    
    goToDetail(post) {
      // 将数据传递到详情页
      this.$router.push({
        name: 'RoastDetail',
        params: { id: post.id },
        query: {
          title: post.title,
          content: post.content,
          author_name: post.author_name,
          category: post.category,
          flarum_url: post.flarum_url
        }
      })
    },
    
    formatTime(timeString) {
      if (!timeString) return '未知时间'
      
      const date = new Date(timeString)
      const now = new Date()
      const diff = now - date
      
      const minutes = Math.floor(diff / (1000 * 60))
      if (minutes < 60) {
        return `发布于 ${minutes} 分钟前`
      }
      
      const hours = Math.floor(diff / (1000 * 60 * 60))
      if (hours < 24) {
        return `发布于 ${hours} 小时前`
      }
      
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      return `发布于 ${days} 天前`
    }
  },
  watch: {
    companyId() {
      // 当 companyId 改变时重新获取数据
      this.currentPage = 1
      this.fetchPosts()
    }
  }
}
</script>

// ... existing style code ...

<style scoped>
.post-list {
  padding: 20px;
  background-color: #fff;
}

.post-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.post-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  flex: 1;
}

.title {
  font-size: 16px;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

.meta {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 12px;
  color: #666;
}

.roast-content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

.author {
  margin-right: 8px;
}

.tags {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.tag {
  padding: 4px 8px;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 10px;
}

.page-btn,
.page-number {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-btn:hover:not(:disabled),
.page-number:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.page-number.active {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.page-btn:disabled {
  color: #bfbfbf;
  cursor: not-allowed;
}


/* 响应式设计 */
@media (max-width: 768px) {
  .post-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .avatar {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .pagination {
    flex-wrap: wrap;
  }
}
</style>